<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>wkwebview</title>
    <style type="text/css">
    	h1 {
	    	color: red;
	    	font-size: 1em;
		}
		body {
		    font-size: 2em;
		}
		button {
		    font-size: 0.5em;
		}
		p {
			font-size: 0.5em
		}
		#tip {
			color: blue;
		}
    </style>
</head>
<body>
    <h1>WKWebview和JS交互</h1>
    
    <div>
    	<p id="tip">ios调用js拍照：</p>	
    	<p id="date">这是图片base64</p>	
    </div>
    <button type="button" onclick="nativeCallback()">js调用ios</button>
    <script type="text/javascript">

        function nativeCallback() {    
            try {
              //使用此方法,会报错,因此使用try-catch
              var cameraParam = {
                    facing:0
                }
            webkit.messageHandlers.openAPPCamera.postMessage(JSON.stringify(cameraParam));
            window.cameraImgStream = function(stream){
                console.log('stream',stream)
                document.getElementById("date").innerHTML=stream;
            }
            } catch(error) {
              console.log('WKWebView post message error: ', error);
            }
        }
    </script>
</body>
</html>
